{% load humanize %}
{% load widget_tweaks %}
{% load firecares_tags %}

<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="{% block meta_description %}Welcome to FireCARES, created by the Fire Fighter Safety and Deployment Study.  Login to learn how fire department resources are deployed to match your community risks.{% endblock %}">
    <meta name="author" content="Prominent Edge LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>{% block meta_title %}Login to your account · FireCARES{% endblock %}</title>
    {% include 'firestation/_favicon.html' %}

    {% include "firestation/_firecares_style.html" %}

    {% include 'google_analytics.html' %}
</head>

<body class="ct-headroom--fixedTopBar cssAnimate">

{% include 'firestation/_mobile_navbar.html' %}
{% include 'firestation/_mobile_search.html' %}

<div id="ct-js-wrapper" class="ct-pageWrapper">

<div class="ct-navbarMobile">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand logo" href="{% url 'firestation_home' %}"><h1>FireCARES</h1></a>
    <button type="button" class="searchForm-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-search"></i></span>
    </button>
</div>

{% include 'firestation/_navbar.html' %}

<div class="ct-site--map">
    <div class="container">
        {% block breadcrumbs %}
            <a href="{% url 'firestation_home' %}">Home</a>
            <a href="{% url 'registration_register' %}">Register</a>
        {% endblock %}
    </div>
</div>
<header class="ct-mediaSection" data-stellar-background-ratio="0.3" data-type="parallax" data-bg-image="{{STATIC_URL}}images/firefighter-header.jpg" data-bg-image-mobile="assets/images/content/registration-parallax.jpg">
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="col-md-12">
                {% block content %}
                <div class="row">
                    <div class="col-md-12 col-lg-12">
                        <ul>
                            {% for message in messages %}
                            <div class="alert {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}alert-success{% else %}alert-danger{% endif %}" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                {{ message }}
                            </div>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 hidden-xs hidden-sm">
                    {% include 'firestation/_safegrade.html' %}
                </div>
                <div class="col-md-6">
                    <form role="form" class="ct-formRegister pull-right-md" method="post" action="">
                        {% csrf_token %}
                        {% block form %}
                        <div class="ct-form--label--type3">
                            <div class="ct-u-displayTableVertical">
                                <div class="ct-u-displayTableCell">
                                    <div class="ct-input-group-btn">
                                        <button class="btn btn-primary">
                                            <i class="fa fa-user"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableCell text-center">
                                    <span class="text-uppercase">LOGIN TO FIRECARES</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            {% with WIDGET_ERROR_CLASS='form-error' %}
                            <div class="ct-form--item ct-u-marginBottom20 form-group">
                                <label>Username</label>
                                {% render_field form.username type="text" class+="form-control input-lg" %}
                                {{ form.username.errors }}
                            </div>
                            <div class="ct-form--item ct-u-marginBottom20 form-group">
                                <label>Password</label>
                                {% render_field form.password type="password" class+="form-control input-lg" %}
                                {{ form.password.errors }}
                            </div>
                            {{ form.non_field_errors }}
                            {% endwith %}
                            <div class="ct-form--item ct-u-marginBottom20 text-center recovery">
                                <a href="{% url 'password_reset' %}">Forgot Password</a> or
                                <a href="{% url 'forgot_username' %}">Username?</a><br/>
                            </div>

                            <div class="ct-form--item ct-u-marginBottom10">
                                <button type="submit" class="btn btn-warning center-block">Login</button>
                            </div>

                            <div class="ct-form--item text-center recovery ct-u-marginBottom10">
                                or
                            </div>

                            <div class="ct-form--item text-center ct-u-marginBottom20">
                                <a class="btn btn-sm btn-default" style="width: 100%" href="{% url 'registration_register' %}" >Request Account</a>
                            </div>

                            <hr/>
                            <div class="ct-form--item text-center add-on">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h4 class="ct-u-marginBottom20 ct-u-marginTop10">IAFF President or Officer?</h4>
                                        <a href="{{ global_settings.IMIS_SSO_LOGIN_URL }}{% absurl 'imis' %}?next={% url 'firestation_home' %}" class="btn btn-sm btn-default center-block ct-u-marginBottom10">Login using IMIS</a>
                                        <p><em>Note: you will be redirected to IAFF's login portal</em></p>
                                    </div>
                                    <div class="col-md-6">
                                        <h4 class="ct-u-marginBottom20 ct-u-marginTop10">IAFC member?<br/><br/></h4>
                                        <a href="{% url 'oauth_redirect' %}" class="btn btn-sm btn-default center-block ct-u-marginBottom10">Login using Helix</a>
                                        <p><em>Note: you will be redirected to IAFC's login portal</em></p>
                                    </div>
                                </div>
                            </div>

                            <hr/>
                            <div class="ct-form--item text-center recovery">
                                Have questions about logging in or getting an account in FireCARES?
                                <a href="{% url 'faq.html' %}#accounts">See the FAQs</a>
                            </div>
                        </div>
                        {% endblock %}
                    </form>
                </div>
                {% endblock %}
            </div>
        </div>
    </div>
</header>

{% include 'firestation/_partners.html' %}
{% include 'firestation/_footer.html' %}

</div>

{% include "firestation/_firecares_scripts.html" %}

</body>
</html>
